<template>
  <a-modal dialogClass="ry-confirm" v-model="visible" :title="title" centered :footer="null"
    @ok="handleOk" @cancel="handleCancel">
    <div class="body-container" v-html="content"></div>
    <div class="footer-container">
      <a-button v-if="showOk" type="danger" @click="handleOk">{{okText}}</a-button>
      <a-button v-if="showCancel" @click="handleCancel">{{cancelText}}</a-button>
    </div>
  </a-modal>
</template>
<script>
export default {
  components: {},
  props: {
    title: {
      default: '温馨提示'
    },
    content: {
      default: '提示'
    },
    showOk: {
      type: Boolean,
      default: true
    },
    showCancel: {
      type: Boolean,
      default: true
    },
    onOk: {
      type: Function,
      default: () => { }
    },
    onCancel: {
      type: Function,
      default: () => { }
    },
    okText: {
      default: '是'
    },
    cancelText: {
      default: '否'
    }
  },
  data () {
    return {
      visible: false
    }
  },
  mounted () { },
  methods: {
    open () {
      this.visible = true
    },
    close () {
      this.visible = false
    },
    handleOk (e) {
      this.onOk()
      this.visible = false
    },
    handleCancel () {
      this.onCancel()
      this.close()
    }
  }
}
</script>
<style lang="less" >
.ry-confirm {
  .ant-modal-content {
    border-radius: 16px;
    .ant-modal-close-x {
      color: #fff;
    }
  }
  .ant-modal-header {
    background: @primary-color;
    color: #fff;
    border-radius: 16px 16px 0 0;
    .ant-modal-title {
      font-size: 18px;
      font-weight: 500;
      color: #fff;
    }
  }
  .body-container {
    padding: 30px 0px 20px 0px;
    line-height: 32px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
  }
  .footer-container {
    width: 100%;
    text-align: center;
    button {
      padding: 0px 40px;
      margin: 20px 30px;
    }
  }
}
</style>
